import MyInput from '@src/common/components/MyInput';
import MyModal from '@src/common/components/MyModal';
import React from 'react';
import { useSelector } from 'react-redux';
import './index.less';

interface IProps {
  onClose: () => void;
}

function Education({ onClose }: IProps) {
  const base: TSResume.Base = useSelector((state: any) => state.resumeModel.base);
  return (
    <MyModal.Dialog title="教育信息" showFooter={false} config={{ cancelBtn: { callback: onClose } }}>
      <div styleName="form">
        <div styleName="flex">
          <div styleName="left">
            <span styleName="require">*</span>学 校 :
          </div>
          <div styleName="right">
            <MyInput onChange={(e) => {}} value={base?.school || ''} placeholder="请输入学校" allowClear={true} />
          </div>
        </div>
        <div styleName="flex">
          <div styleName="left">
            <span styleName="require">*</span>专 业 :
          </div>
          <div styleName="right">
            <MyInput onChange={(e) => {}} value={base?.major || ''} placeholder="请输入专业" allowClear={true} />
          </div>
        </div>
        <div styleName="flex">
          <div styleName="left">
            <span styleName="require">*</span>学 位 :
          </div>
          <div styleName="right">
            <MyInput onChange={(e) => {}} value={base?.degree || ''} placeholder="请输入学位" allowClear={true} />
          </div>
        </div>
        <div styleName="flex">
          <div styleName="left">
            <span styleName="require">*</span>学 年 :
          </div>
          <div styleName="right">
            <MyInput
              onChange={(e) => {
                const nextTime = {
                  ...base?.onSchoolTime,
                  beginTime: e.target.value,
                };
              }}
              value={base?.onSchoolTime?.beginTime || ''}
              placeholder="xxxx.xx.xx"
              style={{ width: 300 }}
              allowClear={true}
            />
            <span styleName="line">-</span>
            <MyInput
              onChange={(e) => {
                const nextTime = {
                  ...base?.onSchoolTime,
                  endTime: e.target.value,
                };
              }}
              value={base?.onSchoolTime?.endTime || ''}
              placeholder="xxxx.xx.xx"
              style={{ width: 300 }}
              allowClear={true}
            />
          </div>
        </div>
      </div>
    </MyModal.Dialog>
  );
}

export default Education;
